<style>
    #box{
        width: 100px;
        height: 100px;
        background-color: aqua;
        position: absolute;left: 0;top: 0;
    }
</style>
<body>
    <div id="box"></div>
</body>
<script>
     var obox = document.getElementById('box')

    //    console.log(obox);

     obox.onmousedown = function(eve){

       var dowE = eve || window.event;

        obox.onmousemove = function(eve){
            
         var e = eve || window.event;
         var movee = eve || window.event;
           
         
          var l = movee.pageX -dowE.offsetX  ;
          var t = movee.pageY -dowE.offsetY ;
          
          if(l<0)l=0
          if(t<0)t=0
          if(l>document.documentElement.clientWidth-obox.offsetWidth){
            l = document.documentElement.clientWidth-obox.offsetWidth
          }
          if(t>document.documentElement.clientHeight-obox.offsetHeight){
            l = document.documentElement.clientHeight-obox.offsetHeight
          }
         obox.style.left = l  +'px';
         obox.style.top = t +'px';
       

        }
        document.onmouseup = function(){
            obox.onmousemove=null;
            console.log('ewqewq')
        }
     }
</script>